<template>
	<view>
		<u-navbar leftIconColor="#000000" :titleStyle="{ color: '#000000' }" :bgColor="bgColor" title="我要反馈"
			:placeholder="true" :autoBack="true"></u-navbar>
		<view class="note">

		</view>
		<view class="" style="width: 92%;margin: 0 auto;padding-top: 15px;position: relative;z-index: 1;">
			<view style=" border-radius: 10px; padding: 15px">
				<view style="font-size: 14px; color: #293033">反馈类型</view>
				<view class="flex" style="flex-wrap: wrap">
					<view @click="btn(i)" :class="cut == i ? 'tit tits' : 'tit'" v-for="(it, i) in arr" :key="i">
						{{ it }}
					</view>
				</view>
			</view>
			<view style="background-color: #fff; border-radius: 10px; padding: 15px; margin-top: 15px">
				<view style="font-size: 14px; color: #293033">问题描述</view>
				<view style="margin-top: 10px">
					<u--textarea maxlength="-1" v-model="value1" border="none"
						placeholder="请在此输入您的投诉/意见的详细内容"></u--textarea>
				</view>

			</view>
			<view class="flex"
				style="background-color: #fff; border-radius: 10px; padding: 10px; margin-top: 15px;justify-content: space-between;">
				<view style="">
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="10"></u-upload>
				</view>
				<text style="font-size: 14px;font-weight: 500;color: #333333;">上传问题截图</text>
			</view>
			<view style="margin-top: 30px">
				<u-button @click="com_btn" shape="circle" type="primary" text="确定"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import config from '../../common/config/index.js';
	export default {
		data() {
			return {
				apiUrl: config.devBase,
				imageurl: config.imgurl,
				value1: '',
				cut: 0,
				arr: [],
				fileList1: [],
				bgColor: 'rgba(255,255,255,0)',
			};
		},
		onPageScroll(e) {
			if (e.scrollTop > 50) {
				this.bgColor = 'rgba(255,255,255,1)'
			} else {
				this.bgColor = 'rgba(255,255,255,0)'
			}
		},
		onLoad(e) {
			if (e.type == 2) {
				this.cut = e.type;
			}
			this.feedbackType();
		},
		methods: {
			async feedbackType() {
				let res = await this.$http.car.feedbackType({});
				console.log(res);
				this.arr = Object.values(res.data);
				this.arr_type = Object.keys(res.data);
				console.log();
			},
			async com_btn() {
				// if (this.fileList1.length == 0) {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '请先上传反馈图片'
				// 	})
				// 	return false;
				// }
				let a = [];
				for (let i = 0; i < this.fileList1.length; i++) {
					a.push(this.fileList1[i].fullurl);
				}
				let res = await this.$http.car.getFeedbake({
					type: this.arr_type[this.cut],
					content: this.value1,
					images: a == '' ? '' : a,
				});
				if (res.code == 1) {
					this.$tips(res.msg);
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/me/feedback',
						});
					}, 800);
				}
			},
			btn(i) {
				this.cut = i;
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中',
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					let item = this[`fileList${event.name}`][fileListLen];
					this[`fileList${event.name}`].splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: 'success',
							message: '',
							url: result.data.fullurl,
							fullurl: result.data.url,
						})
					);
					fileListLen++;
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.apiUrl + 'common/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						header: {
							token: uni.getStorageSync('token'),
						},
						formData: {
							user: 'test',
						},
						success: (res) => {
							setTimeout(() => {
								resolve(JSON.parse(res.data));
							}, 1000);
						},
					});
				});
			},
		},
	};
</script>

<style scoped lang="scss">
	/deep/ .u-button--primary {
		background-color: #2447FF;
		border-color: #2447FF;
	}

	/deep/ .u-textarea {
		background-color: #f7f9fc !important;
	}

	.tits {
		// border: 1px solid #ff3331;
		color: #FFFFFF !important;
		background: #2447FF !important;
	}

	.note {
		background-image: url('@/static/font/21.png');
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		background-size: 100% 100%;
	}

	.tit {
		// border: 1px solid #2447FF;
		// width: calc((100% - 15px) / 3);
		margin-right: 15px;
		margin-top: 15px;
		box-sizing: border-box;
		background-color: #EBEBEB;
		border-radius: 25px;
		padding: 8px 13px;
		text-align: center;
		font-size: 14px;
		font-weight: 400;
		color: #293033;

		&:nth-child(2n) {
			// margin-right: 0px !important;
		}
	}

	/deep/.u-upload__button {
		width: 50px !important;
		height: 50px !important;
	}
</style>
<style>
	page {
		background-color: #f7f9fa;
	}
</style>